<template>
    <div class="">
      <!-- 背景插件 -->
      <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>
      <div id="collectionChannel">
      <el-row>
        <div class="page-title">管理评论</div>
      </el-row>
      <el-row class="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/Home/homaepage' }"><span style="color: #fff">首页</span></el-breadcrumb-item>
          <el-breadcrumb-item><span style="color: #fff">管理评论</span></el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <div class="table-container">
        <el-row>
          <div class="form-title"><i class="el-icon-edit"></i>管理评论</div>
        </el-row>
        <div class="form-container">
          <el-table ref="multipleTable" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" tooltip-effect="dark" style="width: 100%" border stripe @selection-change="selectionChange">
            <el-table-column align="center" type="selection" width="50"></el-table-column>
            <el-table-column align="center" prop="date" label="日期" sortable width="180">
              <template slot-scope="scope">
                <el-input v-if="showEdit[scope.$index]" v-model="scope.row.date" size="small" placeholder="请输入内容"></el-input>
                <span v-if="!showEdit[scope.$index] && !isPopover">{{scope.row.time | FormatDate('yyyy-MM-dd')}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="content" label="内容" >
              <template slot-scope="scope">
                <el-input v-if="showEdit[scope.$index]" v-model="scope.row.content" size="small" placeholder="请输入内容"></el-input>
                <span v-if="!showEdit[scope.$index]">{{scope.row.text}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="150%">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20, 40]" 
                  :page-size="pagesize"         
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="tableData.length">    <!--//这是显示总共有多少数据，-->
          </el-pagination>
        </div>
      </div>
    </div>
    </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
export default {
  name: "comment",
  inject:['reload'],
  data(){
    return{
      input:'',
      isPopover:false,
      tableData:[],//渲染数据
      allTableData:[],
      checked:[],//表格行是否勾选
      showEdit:[false],
      currentPage:1, //初始页
      pagesize:8,    //    每页的数据
    }
  },
  mounted () {
    axios.get('/api/findSpeaksAll').then(res =>{
      this.getInfoSucc(res)
      console.log(res.data)
    }).then(res =>{
      this.tableData = this.allTableData
    })
    // 
    if (document.documentElement.clientWidth < 1490) {
      this.$set(this,'isPopover',true);
    }
    window.onresize = ()=> {
      var clientWidth = document.documentElement.clientWidth;
      if (clientWidth < 1490) {
        this.$set(this,'isPopover',true);
      }
      else
        this.$set(this,'isPopover',false)
    }
  },
  watch:{
    'input':function inputChange() {
      if (this.input == '')
        this.tableData = this.allTableData;
      else{
        this.tableData = [];
        this.allTableData.forEach(function (dataItem,index) {
          if(dataItem.date.indexOf(this.input) != -1){
            this.tableData.push(this.allTableData[index]);
          }
        },this)
      }
    }
  },
  methods:{
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },
    handleDelete(index,row){
      console.log(row.sid)
      this.$confirm('确定删除该记录吗？ ', '提示', {
          type: 'warning'
        }).then(() => {
           console.log('row.id', row.sid)
           let sid = row.sid
          let data = Qs.stringify({sid})
          axios.post('/api/deleteSpeak', data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(res => {
              console.log('res',res)
              this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.reload()
          })
        }).catch(() => {
          console.log('删除失败')
        })
    },
    selectionChange(selection){
      this.checked=selection;
    },
    getInfoSucc(res) {
      this.allTableData = res.data
    }
  }
}
</script>

<style lang="">
.myClass.el-table {
  background: transparent;
}
</style>

<style scoped lang="less">
#collectionChannel {
  width: 84%;
  height: 500px;
  background-color: transparent;
  position: absolute;
  left: 232px;
  top: 5px;
  .page-title{
    font-size: 32px;
    text-align: left;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff;
  }
  .breadcrumb{
    background-color: transparent;
    padding: 0.5rem;
    margin-bottom: 25px;
    border: 1px solid #fff;
    color: #fff;
  }
    .table-container{
      border: 1px solid #fff;
    }
    .form-container{
      padding: 10px;
    }
    .form-title{
      background-color: transparent;
      color: white;
      padding: 0.5rem;
      text-align: left;
      margin-bottom: 5px;
      color: #fff;
    }
    .btn-container{
      overflow: hidden;
      .el-button{
        float: left;
      }
    }
    .search-input{
      width: 300px;
      float: left;
      margin-left: 10px;
      margin-right: 5px;
    }
}
.lizi {
    background: #000;
    height: 700px;
  }
</style>

